<template>
  <div class="bl-container w">
    <!-- 轮播图 -->
    <div class="banner-container">
      <img src="../../assets/images/home/banner1.jpg" alt="" />
    </div>
    <!-- 商品快报 -->
    <div class="letters">
      <!-- 尚品汇快报 -->
      <div class="lette-header">
        <h4>尚品汇快报</h4>
        <router-link to="">更多></router-link>
      </div>
      <!-- 公告 -->
      <div class="announcement">
        <dl>
          <dt>[特惠]</dt>
          <dd><router-link to="">备战开学季 全民半价购数码</router-link></dd>
        </dl>
        <dl>
          <dt>[公告]</dt>
          <dd><router-link to="">备战开学季 全民半价购数码</router-link></dd>
        </dl>
        <dl>
          <dt>[特惠]</dt>
          <dd><router-link to="">备战开学季 全民半价购数码</router-link></dd>
        </dl>
        <dl>
          <dt>[公告]</dt>
          <dd><router-link to="">备战开学季 全民半价购数码</router-link></dd>
        </dl>
        <dl>
          <dt>[特惠]</dt>
          <dd><router-link to="">备战开学季 全民半价购数码</router-link></dd>
        </dl>
      </div>
      <!-- 宫格图 -->
      <div class="grids">
        <ul>
          <li>
            <router-link to="">
              <div class="bgimg"></div>
              话费
            </router-link>
          </li>
          <li>
            <router-link to="">
              <div class="bgimg"></div>
              机票
            </router-link>
          </li>
          <li>
            <router-link to="">
              <div class="bgimg"></div>
              电影票
            </router-link>
          </li>
          <li>
            <router-link to="">
              <div class="bgimg"></div>
              游戏
            </router-link>
          </li>
          <li>
            <router-link to="">
              <div class="bgimg"></div>
              彩票
            </router-link>
          </li>
          <li>
            <router-link to="">
              <div class="bgimg"></div>
              加油站
            </router-link>
          </li>
          <li>
            <router-link to="">
              <div class="bgimg"></div>
              酒店
            </router-link>
          </li>
          <li>
            <router-link to="">
              <div class="bgimg"></div>
              火车票
            </router-link>
          </li>
          <li>
            <router-link to="">
              <div class="bgimg"></div>
              众筹
            </router-link>
          </li>
          <li>
            <router-link to="">
              <div class="bgimg"></div>
              理财
            </router-link>
          </li>
          <li>
            <router-link to="">
              <div class="bgimg"></div>
              礼品卡
            </router-link>
          </li>
          <li>
            <router-link to="">
              <div class="bgimg"></div>
              白条
            </router-link>
          </li>
        </ul>
      </div>
      <!-- 广告 -->
      <div class="advertising">
        <router-lick to="">
          <img src="../../assets/images/home/ad1.png" alt="" />
        </router-lick>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Banner'
}
</script>

<style lang="less" scoped>
.bl-container {
  display: flex;
  .banner-container {
    margin: 5px 0 20px 255px;
    width: 700px;
    height: 459px;
    // background-color: pink;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .letters {
    width: 250px;
    margin: 5px 0 20px 5px;
    padding: 0 2px;
    border: solid 1px #ccc;
    // background-color: skyblue;
    .lette-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      border-bottom: solid 1px #ccc;
      h4 {
        font-weight: 700;
      }
      a {
        color: #333;
        font-size: 12px;
      }
    }
    .announcement {
      padding: 3px 10px;
      border-bottom: solid 1px #ccc;
      dl {
        display: flex;
        line-height: 25px;
        dt {
          font-weight: 900;
        }
        dt,
        dd {
          color: #333;
          font-size: 12px;
        }
        dd {
          a {
            color: #333;
          }
        }
      }
    }
    .grids {
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 70px;
            color: #333;
            font-size: 12px;
            text-align: center;
            border-right: solid 1px #ccc;
            border-bottom: solid 1px #ccc;
            .bgimg {
              width: 40px;
              height: 40px;
              margin-bottom: 3px;
              background: url('../../assets/images/icons.png') no-repeat -10px -5px;
            }
          }
        }
        li {
          &:nth-child(2) {
            a {
              .bgimg {
                background-position: -75px -5px;
              }
            }
          }
        }
        li {
          &:nth-child(3) {
            a {
              .bgimg {
                background-position: -138px -5px;
              }
            }
          }
        }
        li {
          &:nth-child(4) {
            a {
              border-right: 0;
              .bgimg {
                background-position: -200px -5px;
              }
            }
          }
        }
        li {
          &:nth-child(5) {
            a {
              .bgimg {
                background-position: -12px -75px;
              }
            }
          }
        }
        li {
          &:nth-child(6) {
            a {
              .bgimg {
                background-position: -75px -77px;
              }
            }
          }
        }
        li {
          &:nth-child(7) {
            a {
              .bgimg {
                background-position: -139px -75px;
              }
            }
          }
        }
        li {
          &:nth-child(8) {
            a {
              border-right: 0;
              .bgimg {
                background-position: -202px -75px;
              }
            }
          }
        }
        li {
          &:nth-child(9) {
            a {
              .bgimg {
                background-position: -12px -145px;
              }
            }
          }
        }
        li {
          &:nth-child(10) {
            a {
              .bgimg {
                background-position: -75px -147px;
              }
            }
          }
        }
        li {
          &:nth-child(11) {
            a {
              .bgimg {
                background-position: -138px -145px;
              }
            }
          }
        }
        li {
          &:nth-child(12) {
            a {
              border-right: 0;
              .bgimg {
                background-position: -205px -145px;
              }
            }
          }
        }
      }
    }
    .advertising {
      width: 100%;
      margin-top: 3px;
      img {
        width: 100%;
      }
    }
  }
}
</style>
